<template>
  <view class="my-focus-container">
    <!-- 自定义导航栏 -->
    <navigation-bar>
      <navigator
        style="position: absolute;top: 50%;transform: translateY(-50%);left: 20px;font-size: 16px;line-height: 16px;color: #000;"
        class="iconfont" hover-class="none" open-type="navigateBack">&#xe61a;</navigator>
      <view class="top-title-bar">
        {{pageType === 'focusing' ? '正在关注' : pageType === 'befocused' ? '被关注' : ''}}
      </view>
    </navigation-bar>
    <!-- 内容主体 -->
    <scroll-view class="focus-main-wapper" :style="{height: `calc(100% - ${statusbarHeight}px - ${bar_topHeight}px)`}"
      scroll-y="true">
      <view class="focus-list">
        <!-- 每一项 -->
        <view class="focus-item" v-for="i in 3" :key="i">
          <view class="mini-user-panel">
            <!-- 头像 -->
            <view class="l-avatar">
              <u-avatar src="" size="80rpx"></u-avatar>
            </view>
            <!-- 信息 -->
            <view class="f-info">
              <view class="name">
                德玛西亚 拉克丝
              </view>
              <view class="id">
                ID：66666666
              </view>
            </view>
            <!-- 按钮 -->
            <view class="r-btn" :class="pageType" :style="{'background-color': focusList[i] ? '#B7B7B7' : '#000'}"
              v-if="pageType === 'focusing'" @click="onFocusClick(i)">
              {{focusList[i] ? '已关注' : '关注'}}
            </view>
            <view class="r-btn" :class="pageType" :style="{'background-color': focusList[i] ? '#B7B7B7' : '#000'}"
              v-else @click="onFocusClick(i)">
              {{focusList[i] ? '已关注' : '回关'}}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <cc-toast ref="ccToast"></cc-toast>
  </view>
</template>

<script>
  import naviHeightMix from "@/mixins/get-NavigationBar_Height.js"
  import ccToast from "@/components/cc-toast/cc-toast.vue"
  export default {
    mixins: [naviHeightMix],
    data() {
      return {
        pageType: '',
        focusList: [true, true, true]
      };
    },
    onLoad(option) {
      this.pageType = option.pageType || 'focusing'
      this.focusList = this.pageType === 'focusing' ? [true, true, true] : [false, false, false]
    },
    methods: {
      onFocusClick: function(index) {
        if (this.focusList[index]) {
          this.$set(this.focusList, index, false)
          this.$refs.ccToast.show({
            toastText: "取消关注"
          })
        } else {
          this.$set(this.focusList, index, true)
          this.$refs.ccToast.show({
            toastText: "关注成功"
          })
        }
      }
    },
    components: {
      ccToast
    }
  }
</script>

<style lang="scss">
  .my-focus-container {
    height: 100%;

    .top-title-bar {}

    .focus-main-wapper {
      box-sizing: border-box;
      display: flex;
      padding-top: 60rpx;

      .focus-list {
        box-sizing: border-box;
        width: 100%;
        padding: 0 40rpx;

        .mini-user-panel {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 120rpx;

          .f-info {
            margin-left: 30rpx;
            flex: 1;

            .name {
              font-weight: 800;
            }

            .id {
              margin-top: 10rpx;
              font-size: 20rpx;
              color: #0191FF;
            }
          }

          .r-btn {
            width: 112rpx;
            height: 70rpx;
            background-color: #000;
            border-radius: 40rpx;
            color: #FFF;
            text-align: center;
            line-height: 70rpx;
          }

          .focusing {
            background-color: #B7B7B7;
          }

          .befocused {
            background-color: #000;
          }
        }
      }
    }
  }
</style>